<template>
	<view class="mask">
		<view class="form">
			<view class="form-title">
				修改队伍名称
			</view>
			<view class="form-opt">
				<input 
				v-model="redTeamName"
				class="inp inp1" type="text" placeholder="请输入1-5字队名" placeholder-style="color: #fff">
			</view>
			<view class="form-opt">
				<input 
				v-model="blueTeamName"
				class="inp inp2" type="text" placeholder="请输入1-5字队名" placeholder-style="color: #fff">
			</view>
			<view class="form-buttons">
				<button hover-class="none" class="btn btn1" @click="sendIsHide">取消</button>
				<button hover-class="none" class="btn btn2" @click="saveTeamInfo">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'my-dialog',
		// 警告的原因‌是因为在Vue3中，当子组件向父组件发送自定义事件时，如果没有使用“emits”选项声明这些事件，就会出现这个警告。这是因为组件渲染的是片段或文本根节点，导致事件无法自动继承‌

		emits: ['send-hide','send-info'],
		data() {
			return {
				redTeamName:'',
				blueTeamName:''
			};
		},
		methods: {
			// 把布尔值发送给父组件 index.vue
			sendIsHide(){
				this.$emit('send-hide',{isShow: false})
			},
			// 点击“确定”保存信息
			saveTeamInfo(){
				let redName = this.redTeamName;
				let blueName = this.blueTeamName;
				// console.log({redName , blueName});
				if(redName == '' || blueName == ''){
					 // 提示弹窗
					 // uni（uniapp对象）   wx(小程序对象)
					 uni.showToast({
					 	title:'输入框不能为空',
						icon: 'error',
						mask: true
					 })
				}
				else {
					 // 发送数据给父组件 index.vue
					 this.$emit('send-info', { redName: redName , blueName: blueName, isShow: false})
				}
			},
		}
	}
</script>

<style lang="scss">
	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .75);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		.form {
			width: 95%;
			background-color: #fff;
			margin: 200rpx auto 0rpx;
			border-radius: 10rpx;
			padding: 50rpx 0rpx;
			.form-title {
				color: #06CC9B;
				font-size: 38rpx;
				font-weight: bold;
				text-shadow: 0px 2px 2px #ccc;
				text-align: center;
				margin-bottom: 20rpx;
			}
			.form-opt {
				padding: 10rpx 20rpx;
				.inp {
					width: 100%;
					height: 100rpx;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
				}
				.inp1 {
					border: 2px solid #E53F31;
					background-color: #e5796f;;
				}
				.inp2 {
					border: 2px solid #418EE8;
					background-color: #37bfe8;;
				}
			}
			.form-buttons {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				.btn {
					width: 45%;
					height: 80rpx;
					padding: 0;
					line-height: 80rpx;
				}
				.btn1 {
					background-color: #fff;
				}
				.btn2 {
					background-color: #2a9555;
					color: #fff;
				}
			}
		}
	}
</style>